<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>以诗传情</title>
    <link rel="stylesheet" type="text/css" href="css/weui.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-weui.css">
    <!--<link rel="stylesheet" type="text/css" href="css/first.css">-->
    <!--<link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">-->
    <link rel="stylesheet" type="text/css" href="css/amazeui.min.css">
    <style type="text/css">
        body {
            background: url(image/home.png) no-repeat;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        @media only screen and (min-width: 414px) {
            html {
                font-size: 16.08px !important;
            }

            body {
                background: url(image/home.png) no-repeat;
                -moz-background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center;
            }
        }

        @media only screen and (min-width: 300px) {
            body {
                background-position: center;
            }
        }

        @media only screen and (min-width: 700px) {
            body {
                background-position:0% 0%;
            }
        }

        #selectBtn a {
            width: 80% !important;
            margin-top: 20%;
        }

        #inputcontent {
            border-radius: 7px;
        }

        .tofriend {
            padding-left: 0;
        }

        .content {
            margin-top: 60%;
        }

        .tolover {
            padding-right: 0;
        }

        button {
            -webkit-border-radius: 12px !important;
            -moz-border-radius: 12px !important;
            border-radius: 7px !important;
        }
        /*overwrite*/
         .am-btn-warning:focus {
            background-color: #F37B1D !important;
            border-color: #F37B1D!important;
            outline: 0!important;
        }
    </style>
</head>

<body>
<div>

    <div class="content">
        <div class="am-g ">
            <div class="am-u-sm-11 am-u-sm-centered">
                <p><input type="text" class="am-form-field " placeholder="请输入2-8字的尊称" id="inputcontent"/></p>
            </div>
            <div class="am-u-sm-11 am-u-sm-centered">
                <div class="am-u-sm-6 tofriend">
                   <button type="button" class="am-btn am-btn-warning am-btn-block" value="爱情" id="tolover_btn">赠情人
                    </button>
                </div>
                <div class="am-u-sm-6 tolover">
                     <button type="button" class="am-btn am-btn-warning am-btn-block" value="友情" id="tofriend_btn">赠友人
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/ip.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-weui.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.3.0/js/swiper.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.0/js/amazeui.min.js"></script>
<script type="text/javascript">

</script>
</body>
</html>
